<!--
 * @Author: 叫我龟先生 yyxxkahhh@163.com
 * @Date: 2022-09-22 19:52:53
 * @LastEditors: 叫我龟先生 yyxxkahhh@163.com
 * @LastEditTime: 2022-09-22 21:11:05
 * @FilePath: \my_vue_03\src\components\Dog2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="box">
    <img :src="dogImgUrl" alt="">
    <p :style="{color:colorStr}" @click="btnFn">{{dogName}}</p>
    
  </div>
</template>

<script>
//父级里有自定义事件，子级里要有props接收，接收完渲染在div里
//给文字设置一个点击事件，当点击文字时，文字会变色
//
export default {
    props: ["dogImgUrl", "dogName"],
    data () {
        return {
            colorStr:'pink'
        }
    },
    methods: {
        btnFn(){
           this.colorStr = 'deeppink'
        }
    },
}
</script>

<style>
.box{
    width: 200px;
    height: 180px;
    border: 1px solid black;
    text-align: center;
    color: darkslategrey;
    float: left;
}
.box img{
    width: 100%;
}
.box p{
    margin-top: 10px;
};

</style>